import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

function resolve(relativePath: string) {
  return path.resolve(__dirname, relativePath)
}

// https://vitejs.dev/config/
export default defineConfig({
  // || mode === 'production'
  // base: mode === 'test' || mode === 'pre' ? '/lowcode-admin/' : '/',
  resolve: {
    alias: {
      '@': resolve('src')
    }
  },
  css: {
    // 在组合css时 postcss element-plus 和本地scss如果有中文 都会自动添加@charset:UTF-8，因此build会出现警告
    preprocessorOptions: {
      scss: {
        // 全局引入变量和 mixin
        // 文档上写的是additionalData 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `
          @use "@/styles/variables.scss" as *;
          @use "@/styles/mixins.scss" as *;
        `,
        charset: false // 禁止项目scss添加@charset:UTF-8
      }
    }
  },
  plugins: [
    vue(),
    legacy(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
      /**
       * 自定义插入位置 body-last | 'body-first'
       * @default: body-last
       */
      inject: 'body-last',

      /**
       * custom dom id
       * @default: __svg__icons__dom__
       */
      customDomId: '__svg__icons__dom__'
    }),
    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      imports: [
        'vue',
        'vue-router',
        {
          axios: [
            // 'post', // import { post } from 'axios',
            ['default', 'axios'] // import { default as axios } from 'axios',
          ]
          // import { get, post, download } from '@service/request',
          // '@service/request': ['get', 'post', 'download']
        }
      ],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      // 默认是src/components
      // dirs: ['src/components'],
      extensions: ['vue', 'md'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ],
      dts: 'src/components.d.ts'
    })
  ]
})
